<!-- TodoHeader 组件 - 开发者：余亚涛 -->
<template>
  <header>
    <input 
      type="text" 
      placeholder="Enter an activity.." 
      v-model="newTodo"
      @keydown.enter="handleAdd"
      ref="inputRef"
    >
    <button @click="handleAdd">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><g><path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/></g></svg>
    </button>
  </header>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['add-todo']);

const newTodo = ref('');
const inputRef = ref(null);

const handleAdd = () => {
  if (newTodo.value.trim()) {
    emit('add-todo', newTodo.value);
    newTodo.value = '';
    inputRef.value?.focus();
  }
};
</script>

<style scoped>
/* 头部样式保持原有CSS不变 */
</style>
